<template>
  <div class="debris-list" v-loading="loading">
      <div class="input-box" style="position: relative">
          <el-input
              placeholder="搜索趣ID、QQ号、游戏昵称"
              @keyup.enter.native="selectChange"
              style="width:240px;"
              clearable
              v-model.trim="paramsList.keyWord">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" class="btn" style="margin-left:20px" @click="getList(1)">查询</el-button>
          <!-- <span class="input-title">道具筛选</span> -->
          <span class="input-title">状态</span>
          <el-select v-model="manageStatus" placeholder="请选择" @change="statusChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- 添加平台 -->
            <span class="input-title">平台</span>
            <el-select v-model="areaType" placeholder="请选择" @change="typeStatusChange">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
          <span class="input-title">上架时间</span>
          <el-date-picker
              @change="dateChange"
              v-model="date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <!-- <el-button type="success" class="btn" @click="exportData" style="position: absolute; right: 10px">导出</el-button> -->
      </div>
      <div class="table-box">
        <el-table :data="tableData" ref="table" @sort-change="sortChange" border style="width: 100%">
            <el-table-column fixed width="130" prop="manageTime" label="日期">
              <template slot-scope="scope">
                <span>{{ formatDate(scope.row.manageTime, 'YYYY-MM-DD') }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed width="100" prop="userId" label="趣ID"></el-table-column>
            <el-table-column fixed width="150" prop="accountNo" label="QQ号/昵称/平台">
              <template slot-scope="scope">
                <div>{{ scope.row.accountNo }}</div>
                <div>{{ scope.row.roleName }}</div>
                <div>平台：{{ scope.row.areaType === 1 ? '安卓' : scope.row.areaType === 2 ? 'IOS' : '-' }}</div>
                <div v-if="scope.row.accountBlackDesc" style="color: red"> {{ scope.row.accountBlackDesc }}</div>
              </template>
          </el-table-column>
            <!-- <el-table-column fixed prop="nickName" label="昵称"></el-table-column> -->
            <el-table-column fixed prop="worth" label="账号估值" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.worth }}元</span>
                </template>
            </el-table-column>
            <el-table-column fixed prop="propNum" label="道具数" sortable="custom">
              <template slot-scope="scope">
                <div>
                  <p>总套数：{{ scope.row.clothes }}</p>
                  <p>枪皮数：{{ scope.row.gunSkin }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed prop="sumIncome" label="累计收益" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.sumIncome }}元</span>
                </template>
            </el-table-column>
            <el-table-column fixed label="托管天数" prop="managerDay"  sortable="custom">
                <template slot-scope="scope">
                    <span v-if="scope.row.managerDay">{{ scope.row.managerDay }}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column fixed prop="rentHour" label="出租时长" sortable="custom"></el-table-column>
            <el-table-column fixed prop="rentCount" label="出租次数" sortable="custom"></el-table-column>
            <el-table-column fixed prop="perHourWorth" label="当前价格" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.perHourWorth }}趣宝石/小时</span>
                    <i class="el-icon-edit" style="color:#409EFF; cursor:pointer;" @click="updateAccountPrice(true, scope)"></i>
                </template>
            </el-table-column>
            <el-table-column fixed prop="initHourWorth" label="起始价格" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.initHourWorth }}趣宝石/小时</span>
                </template>
            </el-table-column>
            <el-table-column fixed prop="playformEarn" label="状态">
              <template slot-scope="scope">
                <div v-if="scope.row.exceptionStatus === 1">
                    <span style="color: #F56C6C;">账号异常</span>
                </div>
                <div v-else>
                    <span v-if="scope.row.manageStatus === 0">待托管</span>
                    <span v-else-if="scope.row.manageStatus === -1">暂停托管</span>
                    <span v-else-if="scope.row.manageStatus === -2" style="color: #F56C6C;">注销托管</span>
                    <span v-else-if="scope.row.manageStatus === 1" style="color:#67C23A;">已托管</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <div>
                      <el-button style="margin-left: 10px;" @click="goDetail(scope.row)" type="text" size="small">查看详情</el-button>
                    </div>
                    <div v-if="scope.row.manageStatus === 0 || scope.row.manageStatus === -1">
                        <p><el-button style="margin-left: 10px;color:red;" @click="openDialog(scope.row, -2)" type="text" size="small">注销托管</el-button></p>
                        <p><el-button style="margin-left: 10px;color:#67C23A;" @click="changeStatus(scope.row, 1)" type="text" size="small">开始托管</el-button></p>
                    </div>
                    <div v-if="scope.row.manageStatus === 1">
                        <p><el-button style="margin-left: 10px;color:red;" @click="openDialog(scope.row, -2)" type="text" size="small">注销托管</el-button></p>
                        <p><el-button style="margin-left: 10px;color:#909399;" @click="openDialog(scope.row, -1)" type="text" size="small">暂停托管</el-button></p>
                    </div>
                    <div v-if="scope.row.manageStatus === -2">
                        <el-button style="margin-left: 10px;color:#67C23A;" @click="changeStatus(scope.row, 1)" type="text" size="small">恢复托管</el-button>
                    </div>
                    <div v-if="scope.row.exceptionStatus === 0">
                        <el-button style="margin-left: 10px;" @click="abnormal(scope)" type="text" size="small">账号异常</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
      </div>

      <div class="tools">
          <el-pagination
              @size-change="sizeChange"
              @current-change="pageChange"
              :current-page="pageNum"
              :page-sizes="_pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
      </div>

      <el-dialog
          class="dialog-box"
          title="暂停/注销理由:"
          :visible.sync="dialogVisible"
          width="500px">
          <div>
              <el-input type="textarea" maxlength="20" rows="3" v-model.trim="reason"></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogCancel">取 消</el-button>
              <el-button type="primary" @click="changeStatusPauseOff(digItem, digStatus)">确 定</el-button>
          </span>
      </el-dialog>

      <el-dialog
          class="dialog-box"
          title="账号异常:"
          :visible.sync="abnormalVisible"
          width="500px">
          <div>
              <el-input type="textarea" maxlength="20" rows="3" v-model.trim="abnormalData.message"></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="abnormalVisible = false">取 消</el-button>
              <el-button type="primary" @click="setAbnormal">确 定</el-button>
          </span>
      </el-dialog>

      <!-- 修改价格弹框 -->
        <el-dialog
            class="dialog-box"
            title="请输入价格"
            :visible.sync="priceVisible"
            width="500px">
            <div v-if="priceInfo" class="price-list">
                <span class="price">当前价格: </span>
                <span>{{ priceInfo.perHourWorth}}趣宝石</span>
            </div>
            <div class="price-list">
                <span class="price">价格修改为：</span>
                <el-input class="n-input" type="number" v-model.trim="updatePriceNumber"></el-input>
                <span class="price2">趣宝石</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateAccountPrice(false)">取 消</el-button>
                <el-button type="primary" @click="conFirmPrice()">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import accAudit from '../accAudit/index'
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

export default {
  components: {
    accAudit
  },
  props: {
    activeName: {
      type: String,
      default: '0'
    }
  },
  data () {
      return {
          abnormalVisible: false,
          date: '',
          startDate: '',
          endDate: '',
          options: [
            {
              value: 10,
              label: '全部'
            },
            {
              value: 1,
              label: '托管中'
            },
            {
              value: -1,
              label: '暂停托管'
            },
            {
              value: -2,
              label: '注销托管'
            }
          ],
          tabs: [
              {
                  name: '0',
                  label: '全部账号'
              },
              {
                  name: '1',
                  label: '待审核'
              }
          ],
            areaType: 0,
            typeOptions: [ //平台选择字段
                {
                value: 0,
                label: '全部'
                },
                {
                value: 1,
                label: '安卓'
                },
                {
                value: 2,
                label: 'IOS'
                }
            ],
          paramsList: {
              jobLevel: null,
              keyWord: null,
              gem: null
          },
          digStatus: null,
          digItem: {},
          tableData: [],
          reason: null,
          pageNum: 1,
          pageSize: this._pageSize,
          total: 0,
          loading: false,
          dialogVisible: false,
          type: '',
          sort: '',
          manageStatus: 10,
          abnormalData: {
              message: ''
          },
          index: 0,
          priceVisible: false, // 修改价格flag
         priceInfo: {},
         updatePriceNumber: null
      }
  },
  watch: {
      activeName (name) {
          if (name === '0') {
              this.getList(1)
          }
      }
  },
  activated () {
      this.getList(this.pageNum)
  },
  methods: {
    // 打印
    exportData() {
        this.columns = [{
            title: '日期', key: 'manageTimeDesc'
        },
        {
            title: '趣ID', key: 'userId'
        },
        {
            title: 'QQ号', key: 'accountNo'
        },
        // {
        //     title: '昵称', key: 'roleName'
        // },
        {
            title: '平台', key: 'areaTypeDesc'
        },
        {
            title: '账号估值(元)', key: 'worth'
        },
        {
            title: '道具-总套数', key: 'clothes'
        },
        {
            title: '枪皮数', key: 'gunSkin'
        },
        {
            title: '累计收益（元）', key: 'sumIncome'
        },
        {
            title: '托管天数', key: 'managerDay'
        },
        {
            title: '出租时长', key: 'rentHour'
        },
        {
            title: '出租次数', key: 'rentCount'
        },
        {
            title: '当前价格', key: 'perHourWorthDesc'
        },
        {
            title: '起始价格', key: 'initHourWorthDesc'
        },
        {
            title: '状态', key: 'statusDesc'
        }
        ]
        this.getList(1, true)
    },
      // 修改价格
    updateAccountPrice (flag, scope) {
        this.priceVisible = flag
        this.priceInfo = (scope && scope.row) || {}
        if (!flag) {
            this.updatePriceNumber = null
        }
    },
    conFirmPrice () {
        if (!this.priceInfo) return
        let params = {
            dataId: this.priceInfo.dataId,
            perHourPrice: this.updatePriceNumber
        }
        this.$http.post('/rentPrice/updateAccountPrice', params).then(res => {
            if (res.code === '0') {
                this.$message.success('更改价格成功')
                this.updatePriceNumber = null
                this.getList(1)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.priceVisible = false
        })
    },
        typeStatusChange (areaType) {
            this.areaType = areaType
            this.getList(1)
        },
      // 获取列表
      async getList (pageNum, flag) {
          if (this.loading) return
          this.pageNum = pageNum
          this.loading = true
          let params = {
              pageNum: pageNum,
              pageSize: this.pageSize,
              manageType: this.manageStatus,
              areaType: this.areaType
          }
          if (flag) {
              params.pageSize = 1000000
          }
          if (this.type) params.type = this.type
          if (this.sort) params.sort = this.sort
          if (this.startDate) {
              params.startDate = this.startDate
              params.endDate = this.endDate
          }
          params = Object.assign(params, this.paramsList)
          let res = await this.$http.get('/peace/selectAccountManageList', {
              params
          })
          if (res.code === '0') {
              if (flag) {
                  res.data.list && res.data.list.forEach((item) => {
                        item.areaTypeDesc = item.areaType === 1 ? '安卓' : item.areaType === 2 ? 'IOS' : '-'
                        item.manageTimeDesc = this.formatDate(item.manageTime, 'YYYY-MM-DD')
                        item.initHourWorthDesc = item.initHourWorth + ' 趣宝石/小时'
                        item.perHourWorthDesc = item.perHourWorth + ' 趣宝石/小时'
                        if (item.exceptionStatus === 1) {
                            item.statusDesc = '账号异常'
                        } else {
                            if (item.manageStatus === 0) {
                                item.statusDesc = '待托管'
                            }
                            if (item.manageStatus === -1) {
                                item.statusDesc = '暂停托管'
                            }
                            if (item.manageStatus === -2) {
                                item.statusDesc = '注销托管'
                            }
                            if (item.manageStatus === 1) {
                                item.statusDesc = '已托管'
                            }
                        }
                  })
                 export2Excel(this.columns, res.data.list, '和平精英-租号全部账号列表')
              } else {
                this.tableData = res.data.list
                this.total = res.count
                this.$emit('getCount', res.count)
              }
          } else {
              this.$message({
                  type: 'error',
                  message: '系统异常，请稍后再试'
              })
          }
          this.loading = false
      },
      formatTime (time) {
          if (!time) return '0分'
          let m = 0
          let h = 0
          if (time < 60) {
              return `${time}分`
          } else {
              m = (time % 60)
              h = (time / 60).toFixed(0)
              return m > 0 ? `${h}小时${m}分` : `${h}小时`
          }
      },
      // 后端排序
      sortChange ({ column, prop, order }) {
          this.sort = order || ''
          // 如果没有 sort prop 置为空
          if (!this.sort) {
              this.type = null
          } else {
              if (this.sort === 'ascending') {
                  this.sort = 'asc'
              } else {
                  this.sort = 'desc'
              }
              this.type = prop
          }
          this.getList(1)
      },
      selectChange () {
          this.type = ''
          this.sort = ''
          this.$refs.table.clearSort()
          this.getList(1)
      },
      // 页码切换
      sizeChange (val) {
          this.pageNum = 1
          this.pageSize = val
          this.getList(1)
      },
      // 页容切换
      pageChange (val) {
          this.pageNum = val
          this.getList(this.pageNum)
      },
      changeStatus (item, status) {
          this.$http.post('/peace/operateAccountManageStatus', {
              accountId: item.accountId,
              operateStatus: status,
              remark: this.reason
          }).then(res => {
              if (res.code === '0') {
                  item.manageStatus = status
                  this.$message({
                      type: 'success',
                      message: '状态修改成功'
                  })
              } else {
                  this.$message({
                      type: 'error',
                      message: res.desc
                  })
              }
          }).catch((err) => {
            this.$message({
                type: 'error',
                message: err.desc
            })
          })
      },
      openDialog (item, status) {
          this.dialogVisible = true
          this.digItem = item
          this.digStatus = status
      },
      changeStatusPauseOff () {
          if (!this.reason) {
              return this.$message({
                  type: 'warning',
                  message: '请填写暂停/注销理由'
              })
          }
          this.dialogVisible = false
          this.changeStatus(this.digItem, this.digStatus)
          this.reason = null
          this.digItem.manageStatus = this.digStatus
      },
      dialogCancel () {
          this.dialogVisible = false
          this.reason = null
      },
      goDetail (item) {
          let query = {
              accountNo: item.accountNo,
            //   gameId: item.gameId,
              dataId: item.dataId,
              userId: item.userId
          }
          const { href } = this.$router.resolve({
              path: '/hpjy/accManageDetail',
              query
          })
          window.open(href, '_blank')
      },
      abnormal (scope) {
        let data = {
            userId: scope.row.userId,
            accountNo: scope.row.accountNo,
            gameId: scope.row.gameId
        }
        this.index = scope.$index
        Object.assign(this.abnormalData, data)
        this.abnormalVisible = true
      },
      setAbnormal () {
        this.$http.post('/trade/setAccountException', {
            ...this.abnormalData
        }).then(res => {
            if (res.code === '0') {
                this.$message.success('已标记为异常')
                this.$set(this.tableData[this.index], 'exceptionStatus', 1)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.abnormalVisible = false
        })
      },
      tabChange (name) {},
      // 状态筛选
      statusChange (status) {
          this.manageStatus = status
          this.getList(1)
      },
      dateChange (date) {
          if (date) {
              this.startDate = date[0] + ' 00:00:00'
              this.endDate = date[1] + ' 23:59:59'
          } else {
              this.startDate = ''
              this.endDate = ''
          }
          this.getList(1)
      },
      formatDate (date, type) {
        return formatDate(date, type)
      }
  }
}
</script>

<style lang="scss" scoped>
    .price-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        .price {
          display: inline-block;
          min-width: 100px;
        }
        .price2 {
          display: inline-block;
          min-width: 80px;
          margin-left: 20px;
        }
        /* 谷歌 */
        /deep/ .el-input__inner::-webkit-outer-spin-button,
        /deep/ .el-input__inner::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }
  .debris-list {
      .input-box {
          margin-top: 10px;
          font-size: 13px;
          font-weight: 500;
          .input-title {
              margin: 0 10px 0 20px;
          }
          .btn {
              margin-top: 10px;
              margin-left: 10px;
          }
      }

      .table-box {
          margin: 20px 0;
          .cover {
              width: 80px;
              height: 80px;
              > img {
                  width: 100%;
                  height: 100%;
              }
          }
          .desc {
              overflow: hidden;
              line-height: 20px;
              -webkit-line-clamp: 5;
              -webkit-box-orient: vertical;
              display: -webkit-box;
              height: 100px;
          }
          .user-icon {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              margin-right: 5px;
              vertical-align: top;
          }
          .table-btn {
              cursor: pointer;
              color: #409EFF;
              font-size: 13px;
              font-weight: 500;
              &:hover {
                  text-decoration: underline;
              }
          }
          .point {
              display:inline-block;
              width:10px;
              height:10px;
              border-radius: 50%;
              background-color:#67C23A;
              margin-right:3px;
          }
          .red-point {
              background-color: #F56C6C;
          }
      }

      .tools {
          padding-right: 20px;
          display: flex;
          justify-content: flex-end;
      }
  }
  .dialog-box {
      /deep/ .el-dialog__body {
          padding: 0 20px;
      }
  }
</style>
